<template>
	<div style="background-color: #f7f7f7;" :style="{
		marginTop:slider+'px',
		paddingTop:topConfig+'px',
		paddingBottom:bottomConfig+'px',
		paddingLeft:prConfig+'px',
		paddingRight:prConfig+'px'
	}">
		<div class="tabs-header">
  	
  	      <div class="tabs-wrapper" id="tabRef">
  	        <div 
  	          v-for="(tab, index) in tabMenuList" 
  	          :key="index"
  	          class="tab-item"
  	          :class="{ active: currentIndex === index }"
  	          @click="handleTabClick(index,tab)"
  	          :id="`tab-${index}`"
			  v-if="tab.show"
  	        >
  	          <div class="" >
  	          	<div class="" >
  	          		<div class="display-flex-column display-flex-align-center" >
  							<div class="">
  								<img v-if='currentIndex === index' style="width: 45px;height: 45px;" :src="tab.imgList[0]" ></img>
  								<img v-else style="width: 40px;height: 40px;" :src="tab.imgList[1]"></img>				
  							</div>
  							<div class="tab-title">
  								{{tab['title']}}
  							</div>
  	          		</div>
  	
  	          	</div>
  	
  	          </div>
  	        </div>
  	        <!-- 滑动指示条 -->
  	        <div 
  	          class="triangle-up"
  	          :style="{
  	            transform: `translateX(${sliderLeft}px)`,
  	          
  	          }"
  	        ></div>
  	      </div>
  	  </div>
	  <div class="tabs-content">
		<div class="bus-index-search">
			<div class="pd-tb10 relative">
				<span class="bus-from">出发城市/景点</span>
				<span class="bus-to">到达城市/景点</span>
				<div class="bus-index-city">
					<div class="bus-station station-left text-black" >
						<span >贵阳</span>
					</div>
					<div class="station-swap-view" >
						<img src="@/assets/images/jiaohuan.png" style="width: 30px; height:30px">
					</div>
					<div  class="bus-station station-right text-black" >
						<span class="text-cf">选择目的地</span>
					</div>
				</div>
				<div class="separate-line"></div>
				<div class="date-row" >
					<div class="date-t">
						出发日期
					</div>
					<div class="text-20 ft-w700 absolute text-black" style="top: 15px;">
						<span class="mr-5">12月25日</span>
						<span class="">周四</span>
					</div>
				</div>
				<div class="separate-line"></div>
				<div class="mt-5 mb-10">
					<div class="button-search">
						<span class="text">查询</span>
					</div>
				</div>

			</div>
			
		</div>
		
  	 
  	  </div>
	</div>
</template>

<script>
    import { mapState } from 'vuex'
	// import theme from "@/mixins/theme";
    export default {
        name: 'home_mul_tab',
        cname: '菜单选项',
        icon: '#iconzujian-xuanxiangka1',
        configName: 'c_home_mul_tab',
        type:0,// 0 基础组件 1 营销组件 2工具组件
        defaultName:'mul_tab', // 外面匹配名称
        props: {
            index: {
                type: null
            },
            num: {
                type: null
            },
			colorStyle:{
				type: null
			}
        },
        computed: {
            ...mapState('mobildConfig', ['defaultArray'])
        },
        watch: {
            pageData: {
                handler (nVal, oVal) {
                    this.setConfig(nVal)
                },
                deep: true
            },
            num: {
                handler (nVal, oVal) {
                    let data = this.$store.state.mobildConfig.defaultArray[nVal]
                    this.setConfig(data)
                },
                deep: true
            },
            'defaultArray': {
                handler (nVal, oVal) {
                    let data = this.$store.state.mobildConfig.defaultArray[this.num]
                    this.setConfig(data);
                },
                deep: true
            }
        },
		// mixins: [theme],
        data () {
            return {
				tabInfo: [],
				currentIndex: 0,
                // 默认初始化数据禁止修改
                defaultConfig: {
					cname: '菜单选项',
                    name:'mul_tab',
                    timestamp: this.num,
					isHide:false,
                    setUp: {
                        tabVal: 0
                    },
					titleLeft:'展示设置',
					titleContent:'内容设置',
					titleRight:'图片样式',
					titlePointer:'指示器设置',
					titleCurrency:'通用样式',
					selectConfig: {
					  title: '默认菜单',
					  activeValue: 1,
					  list: [
					    {
						  activeValue: 0,
						  title: '门票'
						},
						{
						  activeValue: 1,
						  title: '直通车'
						},
						{
						  activeValue: 2,
						  title: '定制游'
						},
						{
						  activeValue: 3,
						  title: '包车游'
						},
						{
						  activeValue: 4,
						  title: '跟团游'
						},
						{
						  activeValue: 5,
						  title: '酒店'
						}
					  ]
					},
					menuStyleConfig:{
						title:'导航样式',
						tabVal: 0,
						tabList: [
						  {
						    name: '图片加文字'
						  },
						  {
						    name: '图片'
						  },
						  {
						    name: '文字'
						  }
						]
					},
					number: {
					    title: '单行显示',
					    tabVal: 0,
					    tabList: [
					        {
					          name: '3个'
					        },
					        {
					          name: '4个'
					        },
					        {
					          name: '5个'
					        }
					    ]
					},
					showConfig: {
						title: '展示样式',
						tabVal: 0,
						tabList: [
						    {
						      name: '固定显示'
						    },
						    {
						      name: '分页滑动'
						    }
						]
					},
                    rowsNum: {
                        title: '显示行数',
                        tabVal: 0,
                        tabList: [
							{
							  name: '1行'
							},
                            {
                              name: '2行'
                            },
                            {
                              name: '3行'
                            },
                            {
                              name: '4行'
                            }
                        ]
                    },
					filletImg:{
						title:'背景圆角',
						type: 0,
						list: [
						  {
						    val: "全部",
						    icon: "iconcaozuo-zhengti",
						  },
						  {
						    val: "单个",
						    icon: "iconcaozuo-bianjiao",
						  }
						],
						valName:'圆角值',
						val: 0,
						min: 0,
						valList:[
							{val:0},
							{val:0},
							{val:0},
							{val:0}
						]
					},
					toneConfig:{
						title: '色调',
						tabVal: 0,
						tabList: [
							{
							  name: '跟随主题风格'
							},
						    {
						      name: '自定义'
						    }
						]
					},
					pointerBgColor:{
						title: '常规样式',
						default: [
							{
								item: '#DDDDDD'
							}
						],
						color: [
						    {
						        item: '#DDDDDD'
						    }
						]
					},
					pointerColor: {
					    title: '选中样式',
					    default: [{
					        item: '#E93323'
					    }],
					    color: [
					        {
					            item: '#E93323'
					        }
					
					    ]
					},
					bgColor: {
					    title: '组件背景',
					    default: [
							{
								item: '#fff'
							},
							{
								item: '#fff'
							}
						],
					    color: [
					        {
					            item: '#fff'
					        },
							{
								item: '#fff'
							}
					    ]
					},
					bottomBgColor:{
						title: '底部背景',
						default: [
							{
								item: '#fff'
							}
						],
						color: [
						    {
						        item: '#fff'
						    }
						]
					},
					topConfig:{
						title: '上边距',
						val: 0,
						min: 0
					},
					bottomConfig:{
						title: '下边距',
						val: 0,
						min: 0
					},
					prConfig: {
					    title: '左右边距',
					    val: 0,
					    min: 0
					},
					// 页面间距
					mbConfig: {
					    title: '页面上间距',
					    val: 0,
					    min: 0
					},
                    tabMenuList: [
						{
							imgList: [require('@/assets/images/foot-001.png'), require('@/assets/images/foot-002.png')],
							title: '门票',
							is_default: false,
							show: true,
							isLink: false,
							link: ''
						},
						{
							imgList: [require('@/assets/images/foot-003.png'), require('@/assets/images/foot-004.png')],
							title: '直通车',
							is_default: true,
							show: true,
							isLink: false,
							link: ''
						},
						{
							imgList: [require('@/assets/images/foot-005.png'), require('@/assets/images/foot-006.png')],
							title: '定制游',
							is_default: false,
							show: true,
							isLink: false,
							link: ''
						},
						{
							imgList: [require('@/assets/images/foot-007.png'), require('@/assets/images/foot-008.png')],
							title: '包车游',
							is_default: false,
							show: true,
							isLink: false,
							link: ''
						},
						{
							imgList: [require('@/assets/images/foot-007.png'), require('@/assets/images/foot-008.png')],
							title: '跟团游',
							is_default: false,
							show: true,
							isLink: true,
							link: '/pages/user/index'
						},
						{
							imgList: [require('@/assets/images/foot-007.png'), require('@/assets/images/foot-008.png')],
							title: '酒店',
							is_default: false,
							show: true,
							isLink: false,
							link: ''
						}
					],
					fillet:{
						title:'背景圆角',
						type: 0,
						list: [
						  {
						    val: "全部",
						    icon: "iconcaozuo-zhengti",
						  },
						  {
						    val: "单个",
						    icon: "iconcaozuo-bianjiao",
						  }
						],
						valName:'圆角值',
						val: 0,
						min: 0,
						valList:[
							{val:0},
							{val:0},
							{val:0},
							{val:0}
						]
					},
                },
                vuexMenu: [],
                boxStyle: '',
                slider: '',
                bgColorLeft: '',
				bgColorRight: '',
				bottomBgColor:'',
                number: 0,
                rowsNum: 0,
                pointerColor:'',
				pointerBgColor:'',
                pageData: {},
                prConfig:0,
				menuStyleConfig:0,
				showConfig:0,
				filletImg:0,
				filletValImg:0,
				valListImg:[],
				fillet:0,
				filletVal:0,
				valList:[],
				toneConfig:0,
				topConfig:0,
				bottomConfig:0,

				tabMenuList: [],
				sliderLeft: 0
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]

                this.setConfig(this.pageData)
				setTimeout(() => {
					this.calculateTabPosition();
				},300)
				// this.updateSliderPosition(1)
            })
        },
        methods: {
			
			 // 计算选项卡位置信息
			calculateTabPosition() {

				//   const element = this.$refs.tabRef;
				//   const rect = element.getBoundingClientRect();
				// console.log("element",element)
				// console.log("rect",rect)
				// const query = uni.createSelectorQuery().in(this);
				const promises = [];
				
				this.tabMenuList.forEach((menu, index) => {
					if(menu.show) {
						promises.push(new Promise((resolve) => {
						
							var element = this.$el.querySelector(`#tab-${index}`);
						var rect = element.getBoundingClientRect();

						if (rect) {
							resolve({
								left: rect.left,
								width: rect.width,
								index: index
							});
						}
						
					}));
					}
					
				});
				if(promises.length) {
					Promise.all(promises).then((results) => {
					this.tabInfo = results.sort((a, b) => a.index - b.index);
					this.updateSliderPosition(this.currentIndex);
				}).catch((err) => {
                    console.log(err)
				});
				}
				
			},

            // 对象转数组
            objToArr(data) {
                let obj = Object.keys(data);
                let m = obj.map((key) => data[key]);
                return m;
            },
		
			
			// 更新滑块位置
			updateSliderPosition(index) {
				if (!this.tabMenuList[index]) return;
				
				// this.sliderLeft = 75 ;
				const tab = this.tabInfo[index];
				this.sliderLeft = tab.left + 12 -this.tabInfo[0].left ;
				console.log('tab',tab)
				console.log('this.sliderLeft',this.sliderLeft)
			},
			setConfig (data) {
                if(!data) return;
				console.log('data',data)
                if(data.mbConfig){
					this.menuStyleConfig = data.menuStyleConfig.tabVal;
					this.showConfig = data.showConfig.tabVal;
					this.filletImg = data.filletImg.type;
					this.filletValImg = data.filletImg.val;
					this.valListImg = data.filletImg.valList;
					this.fillet = data.fillet.type;
					this.filletVal = data.fillet.val;
					this.valList = data.fillet.valList;
					this.toneConfig = data.toneConfig.tabVal;
                    this.pointerColor = data.pointerColor.color[0].item;
					this.pointerBgColor = data.pointerBgColor.color[0].item;
					this.bottomBgColor = data.bottomBgColor.color[0].item;
                    this.slider = data.mbConfig.val;
                    this.prConfig = data.prConfig.val;
					this.topConfig = data.topConfig.val;
					this.bottomConfig = data.bottomConfig.val;
                    this.bgColorLeft = data.bgColor.color[0].item;
					this.bgColorRight = data.bgColor.color[1].item;
                    let rowsNum = data.rowsNum.tabVal;
                    let number = data.number.tabVal;

					this.tabMenuList = data.tabMenuList;
					this.currentIndex = data.selectConfig.activeValue;
					setTimeout( () => {
						this.updateSliderPosition(this.currentIndex);
					},500)

                    
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
.list_menu
    padding 0 12px 12px
    display flex
    flex-wrap wrap
    .item
        margin-top 12px
        font-size 12px
        color #333
        text-align center
        width 33.3333%
        &.four
            width 25%
        &.five
            width 20%
        .img-box
             width 45px
             height 45px
             margin 0 auto 8px auto
             &.on
                 margin-bottom: 0;

             img
               width 100%
               height 100%
    .icontupian
        font-size 16px
.home_menu
    padding 0 12px 12px
    display flex
    overflow hidden
    .menu-item
        margin-top 12px
        font-size 11px
        color #282828
        text-align center
        margin-right 27px

        .img-box
            width 50px
            height 50px
            &.on
                border-radius 50%;
                img,.empty-box
                    border-radius 50%;
        .box,img
            width 100%
            height 100%
        .box
            background #D8D8D8
        p
            margin-top 5px
    &.on
        .menu-item
            margin-right 51px
            &:nth-child(5n)
                margin-right 51px
            &:nth-child(4n)
                margin-right 0
    .icontupian
        font-size 16px
.dot {
    display: flex;
    align-items: center;
    justify-content center;
    padding-bottom 10px;

    &.number{
        bottom: 15px;
    }

    .num{
        width 25px;
        height 18px;
        line-height 18px;
        background-color #000;
        color #fff;
        opacity 0.3;
        border-radius 8px;
        font-size 12px;
        text-align center;
    }

    .dot-item {
        width: 10px;
        height: 3px;
        background: #DDDDDD;
        border-radius: 50%;
        margin: 0 3px;
    }
}
.empty-box{
	background: #f3f9ff;
	img {
		width: 26px !important;
		height: 20px !important;
	}
}

/* 选项卡头部样式 */
.tabs-header {
  position: relative;
  /* background: #fff; */
  height: 70px;
}

.scroll-div {
  white-space: nowrap;
  width: 100%;
  height: 88rpx;
}

.tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  /* padding: 0 24rpx; */
  justify-content: space-around;
}

.tab-item {
  position: relative;
  /* padding: 0 20rpx; */
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  transition: color 0.3s ease;
  z-index: 2;
  
}

.tab-item.active {
  color: #000000;
  font-weight: 700;
  font-size: 13px !important;
}

.tab-span {
  position: relative;
  z-index: 2;
}


.triangle-up {
	/* 基础尺寸设置 */
	width: 30px;
	height: 17px;
	/* 隐藏溢出部分 */
	overflow: hidden;
	position: absolute;
	bottom: -20px;
	left: 0;
}
.triangle-up {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
   width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.triangle-up::after {
	content: "";
	position: absolute;
	/* 创建一个正方形 */
	width: 28px;
	height: 28px;
	/* 背景色设置为白色 */
	background: #fff;
	/* 添加圆角 */
	border-radius: 6px;
	/* 旋转45度形成菱形 */
	transform: rotate(45deg);
	/* 定位调整形成向上的三角形 */
	top: 12px;
	left: 6px;
	/* 添加阴影增强立体感（可选） */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 内容区域样式 */
.tabs-content {
  // height: 400rpx;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 15px 10px;
//  box-shadow: 10rpx 0rpx 25rpx 10rpx #DEE4E7;
      -webkit-box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);
    -moz-box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);
    box-shadow:0 1px 4px rgba(204, 204, 204, 0.6);
}

.bus-index-search{
		// background-color: #fff;
		// margin: -40px 15px 15px;
		// padding: 15px 15px 0 15px;
		// border-radius: 5px;
		// box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05);
		// position: relative;
		    padding: 0 10px;
	}
	.bus-from{
		left: 0;
		position: absolute;
		top: 15px;
		font-size: 10px;
		color: #999;
	}
	.bus-to{
		right: 0;
		position: absolute;
		top: 15px;
		font-size: 10px;
		color: #999;
	}
	.bus-index-city{
		margin-top: 10px;
		height: 60px;
		font-size: 20px;
		font-weight: 500;
		padding: 4;
		align-self: stretch;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.city-block {
		flex: 1;
		font-size: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 44px;
		line-height: 44px;
	}

	.bus-station{
		height: 60px;
		line-height: 60px;
		font-weight: 700;
		flex: 1;
		opacity: 1;
		transition: all .25s ease-in-out;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		// color: #999;
	}
	.station-left {
	    text-align: left;
	}
	.station-right {
	    text-align: right;
	}
	.station-swap-view{
		color: var(--view-theme);
		width: 30px;
		align-self: stretch;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 8px;
	}
	.i-bus{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 15px;
		
	}
	.date-row {
	    height: 70px;
	    display: flex;
	    flex-direction: column;
	    align-items: baseline;
	    line-height: 70px;
		position: relative;
	}
	.date-t{
		left: 0;
		font-size: 10px;
		color: #999;
		line-height: 12px;
		font-weight: normal;
		position: absolute;
		top: 15px;
	}
	.history-row {
		padding-bottom: 12px;
		line-height: 12px;
		white-space: nowrap;
		overflow-x: auto;
		overflow: -moz-scrollbars-none;
	}
	.history-span{
		color: #999;
		font-size: 12px;
		margin-right: 11px;
		
	}
	.history-span:last-child {
	    margin-right: 0;
	}
	.tab-bar {
	    background-color: #fff;
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-around;
	    height: 57px;
	    box-shadow: 0 -3px 2px 0 rgba(0, 0, 0, .05);
		z-index: 99;
	}
	.tab-bar .tab-item {
	    margin-top: 6px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    color: #333;
	    font-size: 12px;
	}
	.i-swap.swap-animation {
		transition: all .25s ease-in-out;
		transform: rotate(180deg)
	}
	.station-left.swap-animation {
	    transform: translateX(100%);
	    opacity: 0
	}
	.station-right.swap-animation {
	    transform: translateX(-100%);
	    opacity: 0
	}
	.separate-line {
		background-color: #eee;
		height: 1px;
	}
	.text-black{
	color: #000000;
	}

	.button-search {
    margin-top: 10px;
    height: 44px;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #ffa50a, #f70);
    display: flex;
    justify-content: center;
    align-items: center;
}

 .button-search .text {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
}

</style>
